<template>
	<view class="page w-full bg-f5f5f5 flex flex-col">

		<navbar useTitle :customStyle="`background-color: rgba(255,255,255,${navOpacity} !important`">
			<template #title>
				<view class="w-full" :style="{'opacity':`${navOpacity}`}">
					<z-tabs :current="currentTab" :list="tabList" @change="tabsChange"
						:tabsStyle="{'background':'transparent'}"></z-tabs>
				</view>
			</template>
		</navbar>

		<!-- 商品信息 -->
		<view class="goods-info-1 w-full z-1">
			<wd-swiper :list="swiperList" autoplay :indicator="{ type: 'fraction' }" indicatorPosition="bottom-right"
				height="350"></wd-swiper>
		</view>

		<!-- 商品详情 -->
		<view class="goods-info-2 w-full h-500 bg-danger">
			内容2
		</view>

		<!-- 评论 -->
		<view class="goods-info-3 w-full  bg-info" style="height: 2000rpx;">
			内容3
		</view>



	</view>
</template>

<script setup>
	import { onPageScroll } from '@dcloudio/uni-app';
	import { getDomInfo } from '@/utils/common'
	// 设置导航栏高度
	let statusBarHeight = ref(null)
	let navBarHeight = ref(null)
	// 记录每一个模块的偏移量
	let doms = ref([
		{ name: '.goods-info-1', top: 0, bottom: 0 },
		{ name: '.goods-info-2', top: 0, bottom: 0 },
		{ name: '.goods-info-3', top: 0, bottom: 0 },
	])
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
		const custom = uni.getMenuButtonBoundingClientRect()
		navBarHeight.value = custom.height + (custom.top - statusBarHeight.value) * 2
		console.log("statusBarHeight高度：" + statusBarHeight.value)
		console.log("navBarHeight高度：" + navBarHeight.value)

		// 记录每一个模块的偏移量
		nextTick(() => {
			doms.value.forEach((d, index) => {
				getDomInfo(d.name, (rect) => {
					d.top = rect.top
					d.bottom = rect.bottom
				})
			})
		})
	})

	// 监听页面滚动 
	let navOpacity = ref(0)
	onPageScroll((e) => {
		// 1.动态设置导航栏的透明度
		if (e.scrollTop < 84) {
			navOpacity.value = e.scrollTop / 84
		} else {
			navOpacity.value = 1
		}

		// 2.页面滚动时候,动态设置tabs的切换 150中有84是导航栏高度 剩余的66是为了提前一点距离就触发tab切换加的
		let distance = e.scrollTop + 150
		if (doms.value[1].bottom <= distance && e.scrollTop < doms.value[2].bottom) {
			currentTab.value = 2
			// console.log('进入第三个模块')
		} else if (doms.value[0].bottom <= distance && e.scrollTop < doms.value[1].bottom) {
			currentTab.value = 1
			// console.log('进入第二个模块')
		} else if (distance <= doms.value[0].bottom) {
			currentTab.value = 0
			// console.log('进入第一个模块')
		}

	})

	const tabList = ref(['商品', '评价', '详情'])
	const currentTab = ref(0)
	// tab切换时候，滚动到指定模块
	const tabsChange = (e) => {
		let distance = doms.value[e].top - 84
		uni.pageScrollTo({
			scrollTop: distance,
			duration: 300
		});
	}


	const swiperList = ref([
		'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
		'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
		'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
		'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
		'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg'
	])
</script>

<style lang="scss" scoped>

</style>